<style lang="less" rel="stylesheet/less" type="text/less">
</style>
<template>
  <div>
    <Table :columns="titleName" :data="data" :loading="table_loading" stripe />
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      required: true
    },
    table_loading: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      titleName: [
        {
          title: "序号",
          render: (h, { row }) => {
            const index = <div>{row._index + 1}</div>;
            return index;
          }
        },
        {
          title: "用户",
          render: (h, { row }) => (
            <div>
              <div>名称:{row.name}</div>
              <div>手机号码:{row.phone}</div>
            </div>
          )
        },
        {
          title: "余额",
          render: (h, { row }) => (
            <span
              onClick={() => {
                this.toDetail(row.id);
              }}
              style="color:deepskyblue;cursor:pointer"
            >
              {row.amount}
            </span>
          )
        },
        {
          title: "用户状态",
          render: (h, { row }) => {
            let status;
            if (row.locked === 0) {
              status = <div>正常</div>;
            } else {
              status = <div>锁定</div>;
            }
            return status;
          }
        },
        {
          title: "注册时间",
          // key: "created_at",
          render: (h, { row }) => {
            this.$moment.locale(navigator.language);
            let real_startTime = this.$moment
              .utc(`${row.created_at}`)
              .local()
              .format("lll");
            return <div>{real_startTime}</div>;
          }
        },
        {
          title: "操作",
          render: (h, { row }) => {
            let editButton;
            if (row.locked === 0) {
              editButton = (
                <div>
                  <Button
                    name="index__edit"
                    size="small"
                    onClick={() => {
                      this.lockEdit(row.id);
                    }}
                    type="error"
                  >
                    锁定
                  </Button>
                  <Button
                    name="index__edit"
                    size="small"
                    style="margin-left: 16px"
                    onClick={() => {
                      this.Recharge(row);
                    }}
                    type="primary"
                  >
                    充值
                  </Button>
                </div>
              );
            } else {
              editButton = (
                <div>
                  <Button
                    name="index__delete"
                    size="small"
                    onClick={() => {
                      this.activeEdit(row.id);
                    }}
                    type="success"
                  >
                    解锁
                  </Button>
                  <Button
                    name="index__edit"
                    size="small"
                    style="margin-left: 16px"
                    onClick={() => {
                      this.Recharge(row);
                    }}
                    type="primary"
                  >
                    充值
                  </Button>
                </div>
              );
            }
            return editButton;
          }
        }
      ]
    };
  },
  methods: {
    // 锁定操作
    lockEdit(id) {
      this.$emit("lockEdit", id);
    },
    // 激活操作
    activeEdit(id) {
      this.$emit("activeEdit", id);
    },
    // 详细流水跳转
    toDetail(id) {
      this.$router.push({
        name: "panx-financial-detail",
        params: { id }
      });
    },
    Recharge(detail) {
      this.$emit("openRecharge", detail);
    }
  }
};
</script>
